<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      display: flex;
      list-style-type: none;
      flex-wrap: wrap;
    }

    li {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;

    }

    h2 {
      font-size: 16px;
    }

    li img {
      width: 80%;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="item in items" :key="item.id">
        <h4>
          {{ item.name }}
        </h4>
        <img :src="item.pic" alt="">
      </li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script src="./axios.js"></script>
  <script>

    axios.defaults.baseURL = "https://api.it120.cc/conner";
    axios.defaults.timeout = 5000;
    // axios.defaults.headers['access_token'] = 'dhjwidj49hd894849';

    // axios 拦截器
    // 添加请求的拦截器 所有的请求 都会经过这个拦截器，回调函数中的config就是请求的所有的配置
    axios.interceptors.request.use(function (config) {
      // return config 放行 如果不放行，不会发请求
      console.log('我是在请求发送之前触发，拦截所有的请求',config)
      config.headers['access_token'] = "12345";
      return config;
    }, function (error) {
      // 请求失败拦截器 pending
      return Promise.reject(error);
    });

    // 添加响应拦截 回调参数 是接口返回数据 
    axios.interceptors.response.use(function (response) {
      // Any status code that lie within the range of 2xx cause this function to trigger
      if(response.data.code === 401){
        // token过期了 弹出提醒 重定向 到登录页
      }
      // Do something with response data
      return response;
    }, function (error) {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      return Promise.reject(error);
    });
    const app = new Vue({
      el: '#app',
      data: {
        items: []
      },
      created() {
        this.fetchItems();
        this.fetchCates()
      },
      methods: {
        fetchItems() {
          axios.post('/shop/goods/list', {
            categoryId: 72399
          }).then(res => {
            console.log(res)
          })
        },
        fetchCates() {
          axios.get('/shop/goods/category/all').then(res => {
            console.log(res)
          })
        }
      }
    })
  </script>
</body>

</html>